<template>
  <div>
    <el-tabs v-model="activeKey" @tab-click="handleClick">
      <el-tab-pane label="分账请求" name="1"> </el-tab-pane>
      <el-tab-pane label="分账明细" name="2"></el-tab-pane>
      <el-tab-pane label="分账接收方" name="3"></el-tab-pane>
    </el-tabs>

    <el-card style="position: relative; min-width: 1200px; overflow: inherit">
      <el-form
        ref="wechatCaseForm"
        :model="commandForm"
        label-width="90px"
        label-position="left"
      >
        <el-row>
          <el-col :span="7" style="display: flex" v-if="activeKey !== '3'">
            <el-form-item prop="date" label="选择时间">
              <el-date-picker
                v-model="commandForm.date"
                style="width: 100%; border-radius: 0px; margin-top: 1px"
                type="datetimerange"
                start-placeholder="开始时间"
                :default-time="['00:00:00', '23:59:59']"
                end-placeholder="结束时间"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="display: flex" v-else>
            <el-form-item prop="date" label="选择时间">
              <el-date-picker
                v-model="commandForm.date"
                style="width: 100%; border-radius: 0px; margin-top: 1px"
                type="datetimerange"
                start-placeholder="开始时间"
                :default-time="['00:00:00', '23:59:59']"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col
            v-if="activeKey == '1'"
            :span="7"
            :offset="1"
            :style="{ display: this.commandForm.payformChannel ? 'flex' : '' }"
          >
            <el-form-item label="支付渠道" prop="payformChannel">
              <el-select
                v-model="commandForm.payformChannel"
                class="leftSelect"
                style="width: 100%"
                placeholder="请选择支付渠道"
                clearable
                @change="handleChannel"
              >
                <el-option
                  v-for="(item, index) of payChannel"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label=""
              prop="payType"
              label-width="0"
              v-if="commandForm.payformChannel"
            >
              <el-select
                class="rightSelect"
                v-model="commandForm.payType"
                style="width: 100%"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of payChannelTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            v-if="activeKey == '2'"
            :span="7"
            :offset="1"
          >
            <el-form-item label="结算渠道" prop="payformChannel">
              <el-select
                v-model="commandForm.payformChannel"
                class="leftSelect"
                style="width: 100%"
                placeholder="请选择结算渠道"
                clearable
                >
                <el-option label="所有" value=""></el-option>
                <el-option label="微信" value="wechat"></el-option>
                <el-option label="支付宝" value="ali"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="activeKey == '2'" :offset="1">
            <el-form-item label="分账状态" prop="settleStatus">
              <el-select
                v-model="commandForm.settleStatus"
                style="width: 100%"
                placeholder="请选择分账状态"
                clearable
              >
                <el-option
                  v-for="item of refundStateList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="activeKey == '3'" :offset="1">
            <el-form-item label="接收方类型" prop="receiverType">
              <el-select
                v-model="commandForm.receiverType"
                style="width: 100%"
                placeholder="请选择接收方类型"
                clearable
              >
                <el-option
                  v-for="item of refundCaseList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1" v-if="activeKey == '3'">
            <el-form-item label="接收方ID" prop="receiverId">
              <el-select
                v-model="commandForm.receiverId"
                style="width: 100%"
                placeholder="请输入接收方ID"
                filterable
                remote
                :remote-method="remoteMethod"
                  @change="changeValue($event)"
                  @focus="setId1()"
                clearable
              >
              <el-option
                    v-for="item of merchantList"
                    :key="item.receiverId"
                    :label="item.receiverId"
                    :value="item.receiverId">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" style="min-width: 170px">
            <el-button class="width120" @click="this.resetFields"
              >重置</el-button
            >
            <el-button type="primary" class="width120" @click="()=>{
               this.dataForm=JSON.parse(JSON.stringify(this.commandForm));
               this.handleQuery()
              }"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px; min-width: 1200px">
      <div class="switch">
        <div>
          <el-switch v-model="isFixedTableH" inactive-text="固定表头">
          </el-switch>
        </div>
      </div>
      <el-table
        v-if="activeKey == '1'"
        :data="dataList"
        :height="fixedTableHeight"
      >
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="merchantOrderNo"
          align="center"
          label="商户订单号"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.merchantOrderNo ? scope.row.merchantOrderNo : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payChannel"
          align="center"
          label="支付渠道"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.payChannel
                  ? scope.row.payChannel
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payAmountStr"
          align="center"
          label="支付金额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.payAmountStr ? scope.row.payAmountStr : "0.00" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleAmountStr"
          align="center"
          label="分账金额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.settleAmountStr ? scope.row.settleAmountStr : "0.00" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleMembers"
          align="center"
          label="分账接收方"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <span>{{
                scope.row.settleMembers
                  ? scope.row.settleMembers
                  : "-"
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="address"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetails(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="activeKey == '2'"
        :data="dataList"
        :height="fixedTableHeight"
      >
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleNo"
          align="center"
          label="云尘付分账单号"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.settleNo
                  ? scope.row.settleNo
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleChannel"
          align="center"
          label="结算渠道"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <span>{{
                scope.row.settleChannel
                  ? scope.row.settleChannel
                  : "-"
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="receiverName"
          align="center"
          label="分账接收方名称"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.receiverName ? scope.row.receiverName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="receiverId"
          align="center"
          label="分账接收方ID"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.receiverId ? scope.row.receiverId : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleAmountStr"
          align="center"
          label="分账金额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.settleAmountStr ? scope.row.settleAmountStr : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="settleStatusName"
          align="center"
          label="分账状态"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <span >{{
                scope.row.settleStatusName ? scope.row.settleStatusName : "-"
              }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="activeKey == '3'"
        :data="dataList"
        :height="fixedTableHeight"
      >
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="channelName"
          align="center"
          label="分账渠道"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.channelName ? scope.row.channelName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="receiverTypeStr"
          align="center"
          label="接收方类型"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.receiverTypeStr?scope.row.receiverTypeStr: "-"
              }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="thirdMemberId"
          align="center"
          label="渠道账号"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.thirdMemberId ? scope.row.thirdMemberId : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="receiverName"
          align="center"
          label="分账接收方名称"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.receiverName ? scope.row.receiverName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="receiverId"
          align="center"
          label="分账接收方ID"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <span>{{ scope.row.receiverId ? scope.row.receiverId : "-" }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
    <!-- 详情抽屉 -->
    <detail-drawer
      :drawer.sync="drawer"
      :info="detailsInfo"
      :activeKey="activeKey"
    ></detail-drawer>
  </div>
</template>

<script>
import detailDrawer from "./detailDrawer.vue";
import { setTabIndex, getTabIndex } from "@/utils/public";
import mixin from "@/mixins/mixin";
export default {
  mixins: [mixin],
  name: "wechatCaseAccount",
  components: {
    detailDrawer,
  },
  data() {
    return {
      merchantList: [],
      activeKey: getTabIndex(),
      mixinViewModuleOptions: {
        getDataListURL: "/api/orderSettle/listOrderSettleByPage",
        createdIsNeed: false,
      },
      detailsInfo: {},
      drawer: false,
      dataList: [],
      commandForm: {
        date: [
          this.$moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
          this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        ],
        startTime: this.$moment()
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        endTime: this.$moment()
          .endOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        receiverType: "",
        receiverId: "",
        settleStatus: "",
        payType: "",
        payformChannel: "",
      },
      form: {},
      settleList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "分账", value: "no_settle" },
        { id: 3, label: "多次分账", value: "actual_settle" },
        { id: 4, label: "完结分账", value: "delay_settle" },
      ],
      payTypeList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "微信小程序支付", value: "wx_lite" },
        { id: 3, label: "微信JSAPI支付", value: "wx_js" },
        { id: 4, label: "微信APP支付", value: "wx_app" },
        { id: 5, label: "微信H5支付", value: "wx_h5" },
        { id: 6, label: "微信Native支付", value: "wx_native" },
        { id: 7, label: "微信主扫", value: "wx_scaning" },
        { id: 8, label: "微信被扫", value: "wx_scanned" },
      ],
      refundStateList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "未结算", value: 0 },
        { id: 3, label: "结算成功", value: 1 },
        { id: 4, label: "处理中", value: 2 },
        { id: 5, label: "结算失败", value: 3 },
      ],
      refundCaseList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "商户号", value: "MERCHANT_ID" },
        { id: 3, label: "个人OpenID", value: "PERSONAL_OPENID" },
        { id: 4, label: "支付宝登录号", value: "loginName" },
      ],
      payChannel: null,
      payChannelType: this.$store.state.channelListType,
      payChannelTypeList: [],
    };
  },
  created() {
    this.$http.get("/api/dict/channelList").then((res) => {
        if (res.code === "0000") {
          let list = res.data;
          let payChannel =
            list &&
            list.filter(
              (item) =>
                item.value == "" || item.value == "wechat" || item.value == "ali"
            );
              var a = [{ label: "所有", value: "" }];
          var b = a.concat(payChannel);
          this.payChannel=b
        }
      });
    
  },
  mounted() {
    this.handleClick();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.handleQuery();
        }
      },
    },
    deep: true,
  },
  methods: {
    getTabIndex,
    remoteMethod(query) {
      if (query !== "") {
        this.getMerchantList(query);
      } else {
        this.merchantList = [];
      }
    },
    getMerchantList(val) {
      this.$http
        .get(
          "/api/orderSettle/getReceiverList?receiverId=" +
            val
        )
        .then((res) => {
          if (res.code === "0000") {
            this.merchantList = res.data;
          }
        });
    },
    changeValue(value) {
      let obj = this.merchantList.find(function (item) {
        return item.receiverId === value;
      });
      this.commandForm.receiverId = obj ? obj.receiverId : null;
    },
    setId1() {
      if (this.merchantList.length != 0) {
        this.merchantList = [];
      }
    },
    //重置操作
    resetFields() {
      if (this.activeKey != 3) {
        this.resetForm("wechatCaseForm");
      } else {
        this.resetForm("wechatCaseForm");
        this.commandForm = {
          date: [],
          startTime: "",
          endTime: "",
          receiverType: "",
          receiverId: "",
          settleStatus: "",
          payformChannel: "",
          payType: "",
        };
      }
    },
    handleDetails(row) {
      switch (this.activeKey) {
        case "1":
          this.$http
            .get(`/api/orderSettle/getOrderSettleById?orderId=${row.orderId}`)
            .then((res) => {
              if (res.code === "0000") {
                this.detailsInfo = res.data;
                this.drawer = true;
              }
            });
          break;
      }
    },
    setRefundStatus(val) {
      let str = "";
      let color = "";
      switch (val) {
        case 0:
          str = "未结算";
          color = "pedding";
          break;
        case 1:
          str = "结算成功";
          color = "succeed";
          break;
        case 2:
          str = "处理中";
          color = "pedding";
          break;
        case 3:
          str = "结算失败";
          color = "failed";
          break;
      }
      return {
        str,
        color,
      };
    },
    handleClick() {
      this.dataList=[]
      setTabIndex(this.activeKey);
      this.pageSize = 10;
      this.resetForm("wechatCaseForm");
      this.payChannelTypeList = [];
      if (this.activeKey == "3") {
        this.commandForm.date = [];
        this.commandForm.startTime = "";
        this.commandForm.endTime = "";
      } else {
        this.commandForm.date = [
          this.$moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
          this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        ];
        this.commandForm.startTime = this.$moment()
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss");
        this.commandForm.endTime = this.$moment()
          .endOf("day")
          .format("YYYY-MM-DD HH:mm:ss");
      }
    this.dataForm=JSON.parse(JSON.stringify(this.commandForm))
      this.handleQuery();
    },
    handleQuery() {
      this.dataForm.startTime = undefined;
      this.dataForm.endTime = undefined;

      if (this.dataForm.date && this.dataForm.date.length) {
        this.dataForm.startTime = this.dataForm.date[0];
        this.dataForm.endTime = this.dataForm.date[1];
      }
      if (this.activeKey == "1") {
        this.mixinViewModuleOptions.getDataListURL =
          "/api/orderSettle/listOrderSettleByPage";
        this.getDataList();
      } else if (this.activeKey == "2") {
        this.mixinViewModuleOptions.getDataListURL =
          "/api/orderSettle/settleDetailPage";
        this.getDataList();
      } else {
        this.mixinViewModuleOptions.getDataListURL =
          "/api/orderSettle/listOrderSettleReceiverByPage";
        this.dataForm.onlyShowSelft = false;
        this.dataForm.busType = undefined;
        this.dataForm.payformChannel = "";
        this.dataForm.channel = "";
        this.getDataList();
      }
    },
    setPayStatus(val) {
      let str = "";
      switch (val) {
        case "MERCHANT_ID":
          str = "商户号";
          break;
        case "PERSONAL_OPENID":
          str = "个人OpenID";
          break;
        case "loginName":
          str = "支付宝登录号";
          break;
      }
      return str;
    },
    subjectState(val) {
      let str = "";
      switch (val) {
        case "1":
          str = "分账";
          break;
        case "2":
          str = "多次分账";
          break;
        case "3":
          str = "完结分账";
          break;
      }
      return str;
    },

    handleChannel(val) {
      if (val) {
        this.payChannelTypeList = this.payChannelType[val];
      } else {
        this.payChannelTypeList = [];
      }
      this.commandForm.payType = "";
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  color: #4f595f;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  margin-left: 10px;
}
.textBox {
  display: flex;
  .label {
    color: #869daa;
    font-size: 14px;
    width: 120px;
    margin-left: 10px;
    text-align: right;
  }
  .val {
    font-size: 14px;
    margin-left: 20px;
    color: #869daa;
    width: 700px;
  }
}
.pedding {
  color: #f69c1f;
}
.succeed {
  color: #07a555;
}
.failed {
  color: #f42b2b;
}
.switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.search {
  position: absolute;
  right: 0;
  top: -164px;
}
.ml {
  margin-left: 20px;
}
:deep(.leftSelect) {
  .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}
</style>
